<template>
  <div id="stepView" >
    <div class="upLine" v-show="!isActive"></div>
    <div class="downLine" v-show="!isHiddenDownLine"></div>

    <img :src="stepactivation" class="acIcon" v-show="isActive" />
    <img :src="stepunactivation" class="unAcIcon" v-show="!isActive" />

    <div class="rightContentDiv">
        <div :class="{title:!isActive,activeTitel:isActive}" v-show="subTitle !== ''" v-html="titleStr" @click="clickStepView"></div>
        <div class="dateContent" v-show="subTitle !== Null">{{subTitle}}</div>

        <!--<van-uploader v-model="fileList" multiple :max-count="3" preview-size="4rem" style="margin-top: 0.5rem;" v-show="showUpLoadImg">-->
            <!--<div class="cameraDiv">-->
                <!--<img :src="camera1" class="cameraImg" />-->
                <!--<div class="cameraTitle">{{ imageStr }}</div>-->
            <!--</div>-->
        <!--</van-uploader>-->
<div class="imgDiv">
    <img :src="image" v-for="(image , i ) in imgList" @click="clickImg(i)"/>

</div>



    </div>
  </div>
</template>

<script>

import {addImagePrefix,actionWithLink} from '@/utils/utils'
import { ImagePreview } from 'vant';

export default {
  name: "StepView",
  props: {
    title: String,
    subTitle: String,
    isImg: Boolean,
    canEditImg: Boolean,
    isActive: Boolean,
    isHiddenDownLine: Boolean,
      showUpLoadImg:Boolean,
      imgStr:String
  },
    methods:{
      clickStepView(){
          var reg=/(1[3456789]\d{9})|(\d{10})|(0\d{2,3}-\d{7,8})|(\d{3}-\d{3}-\d{4})/g;
          var telList = this.title.match(reg);//返回识别到的手机 数组

          if (telList){
              var phone = telList[0];
              actionWithLink("tel://"+phone);
          }

      },
        clickImg(i){
            ImagePreview({
                images: this.imgList,
                startPosition: i,
                closeOnPopstate:true,
                onClose() {
                }
            });
        }
    },
  data() {
    return {
      stepunactivation: require("@/images/icon/order/stepunactivation.png"),
      stepactivation: require("@/images/icon/order/stepactivation.png"),
        camera1: require("@/images/icon/order/camera.png"),
        fileList: [],
    };
  },
    computed: {
        imageStr() {
            console.log(this.fileList);

            if (this.fileList.length == 0) {
                if (this.showUpLoadImg) {
                    this.copyTitle = '';

                }
                return "添加图片";
            } else if (this.fileList.length == 1) {
                if (this.showUpLoadImg) {
                    this.copyTitle = '处理中';
                }
                return "1/3";
            } else if (this.fileList.length == 2) {
                if (this.showUpLoadImg) {
                    this.copyTitle = '处理中';
                }
                return "2/3";
            } else {
                if (this.showUpLoadImg) {
                    this.copyTitle = '处理中';
                }
                return "图片上限";
            }
        },
        imgList(){
            if (this.imgStr){

                var list = this.imgStr.split(",");
                var urlList = [];
                for (var i = 0; i < list.length; i++) {
                    var str = list[i];
                    urlList.push(addImagePrefix(str));
                }

                console.log(urlList);
                return urlList;

            } else {
                return [];

            }
        },
        titleStr(){

            var tempTitle = this.title;

            var reg=/(1[3456789]\d{9})|(\d{10})|(0\d{2,3}-\d{7,8})|(\d{3}-\d{3}-\d{4})/g;
            var telList = tempTitle.match(reg);//返回识别到的手机 数组

            console.log(telList);

            if (telList){
                var phone = telList[0];
                return tempTitle.replace(phone,'<span style="color: #397BE6">' + phone + '</span>');
            }


            return this.title;
        }
  }
};
</script>

<style scoped lang="less">
#stepView {
  position: relative;
  display: flex;
}
.acIcon {
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50% - 0.5rem;
  left: 3rem - 0.5rem;
}
.unAcIcon {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  top: 50% - 0.25rem;
  left: 3rem - 0.25rem;
}

.upLine {
  position: absolute;
  top: 0;
  left: 3rem;
  height: 50%;
  border-left: 1px dashed #bfc3cd;
}
.downLine {
  position: absolute;
  top: 50%;
  left: 3rem;
  height: 50%;
  border-left: 1px dashed #bfc3cd;
}
.rightContentDiv {
  display: flex;
  flex-direction: column;
  width: 18.333333333333332rem;
  margin-left: 6.666666666666667rem;
  padding: 0.5rem 0;
  border-bottom: 0.5px solid #f0f1f5;
}
.title {
  /*height: 1.4rem;*/
    margin-right: 0.9rem;
    font-size: 0.9rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.4rem;
}

.activeTitel{
    /*height:1.4rem;*/
    margin-right: 1rem;
    font-size:0.9rem;
    font-family:PingFangSC-Semibold,PingFangSC;
    font-weight:600;
    color:rgba(57,123,230,1);
    line-height:1.4rem;
}
.dateContent {
  height: 1.2333333333333334rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 1.2333333333333334rem;
}

.cameraDiv {
    width: 4rem;
    height: 4rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.26666666666666666rem;
    border: 1px solid rgba(240, 241, 245, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cameraImg {
    width: 1.0666666666666667rem;
    height: 1.0666666666666667rem;
    margin-bottom: 0.3333333333333333rem;
}
.cameraTitle {
    margin-top: 0.3333333333333333rem;
    height: 1.1rem;
    font-size: 0.8rem;
    font-family: PingFangSC-Regular, PingFangSC;
    font-weight: 400;
    color: rgba(191, 195, 205, 1);
    line-height: 1.1rem;
}
.imgDiv{
    display: flex;
    flex-direction: row;
    margin-top: 0.5rem;
}
    img{
        width: 4rem;
        height: 4rem;
        margin-right: 0.7rem;
    }
</style>
